dash: Add separator between favorite and running apps

Only the area used by favorite apps can be used as drop targets, it
is not possible to add new favorites between the running apps at the
end. While that behavior makes sense, it is currently impossible to
distinguish the two areas with confusing results.

Address this by adding a visual separator between favorites and
running apps.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1606>

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 82901309d38879dde664d7fd3b46ae79fafb6f79..50483830b99bafdb8165e4c4a244ae810de7b15a 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -30,6 +30,11 @@ $dash_border_radius: $modal_radius * 1.5;
   padding: ($dash_spacing / 2) $dash_spacing;
 }
 
+.dash-separator {
+  width: 1px;
+  background-color: transparentize($osd_fg_color,0.7);
+}
+
 // OSD Tooltip
 .dash-label {
   background-color: transparentize($osd_bg_color,0.05);

diff --git a/js/ui/dash.js b/js/ui/dash.js
index 0e100cea6b6a8b21002f4f1b9dd110e5acade1c4..2d329ae91eab4bdf1b752d269f8713f38e32bf9c 100644 (file)
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -303,6 +303,7 @@ var Dash = GObject.registerClass({
         this.iconSize = 64;
         this._shownInitially = false;
 
+        this._separator = null;
         this._dragPlaceholder = null;
         this._dragPlaceholderPos = -1;
         this._animatingPlaceholdersCount = 0;
@@ -608,6 +609,14 @@ var Dash = GObject.registerClass({
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             });
         }
+
+        if (this._separator) {
+            this._separator.ease({
+                height: this.iconSize,
+                duration: DASH_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            });
+        }
     }
 
     _redisplay() {
@@ -734,6 +743,26 @@ var Dash = GObject.registerClass({
         for (let i = 0; i < addedItems.length; i++)
             addedItems[i].item.show(animate);
 
+        // Update separator
+        const nFavorites = Object.keys(favorites).length;
+        if (nFavorites > 0) {
+            if (!this._separator) {
+                this._separator = new St.Widget({
+                    style_class: 'dash-separator',
+                    y_align: Clutter.ActorAlign.CENTER,
+                    height: this.iconSize,
+                });
+                this._box.add_child(this._separator);
+            }
+            let pos = nFavorites;
+            if (this._dragPlaceholder)
+                pos++;
+            this._box.set_child_at_index(this._separator, pos);
+        } else if (this._separator) {
+            this._separator.destroy();
+            this._separator = null;
+        }
+
         // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=692744
         // Without it, StBoxLayout may use a stale size cache
         this._box.queue_relayout();
@@ -785,6 +814,12 @@ var Dash = GObject.registerClass({
             numChildren--;
         }
 
+        // Same with the separator
+        if (this._separator) {
+            boxWidth -= this._separator.width;
+            numChildren--;
+        }
+
         let pos;
         if (!this._emptyDropTarget)
             pos = Math.floor(x * numChildren / boxWidth);